import React, { Component } from 'react';
import { Icon, Button, Table, Switch, Form, Input, Modal, Popconfirm } from 'antd';
import { IndexLink, Link } from 'react-router'

import AddMessage from './AddMessage'
const FormItem = Form.Item;



class RoomManager extends Component {

  constructor(props) {
    super(props);
    this.columns = [{
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
      width:'15%',
      render: text => <a href="#">{text}</a>,
    }, {
      title: '留言内容',
      dataIndex: 'message',
      key: 'message',
      width:'30%',
      render: text => <a href="#">{text}</a>,
    }, {
      title: '头像',
      dataIndex: 'photo',
      key: 'photo',
      render: text => <img style={{width:60}} src={text} />,
    }, {
      title: '审核',
      dataIndex: 'checked',
      key: 'checked',
      filters: [
        { text: '已通过', value: true },
        { text: '未通过', value: false },
      ],
      onFilter: (value, record) => value == record.checked.toString(),
      render: (text, record) => (<div className="setting">
                        <p>
                        <Button type={record.checked?'primary':"warning"} 
                                  onClick={()=>{return this.toggleCheckHandler(record)}}> 
                          
                              {record.checked?'通过':" 未通过"}
                        
                        </Button>
                        </p>
                      </div>)

    }, {
      title: 'Action',
      key: 'action',
      render: (text, record, index) => (
        <span>
           <Popconfirm title="确认删除咩?" onConfirm={()=>{return this.delOneMessageHandler(record)}}>
              <a href="#">Delete</a>
            </Popconfirm>  
          </span>
      ),
    }];

    this.state = {
      selectedRowKeys: [],
      selectedRows: [],
      pagination: { pageSize: 20 }
    }
    this.addOneMessageHandler = this.addOneMessageHandler.bind(this)
    this.delOneMessageHandler = this.delOneMessageHandler.bind(this)
    this.delMessagesHandler = this.delMessagesHandler.bind(this)
    this.toggleCheckHandler = this.toggleCheckHandler.bind(this)
  }


  componentWillMount() {
    let { roomId } = this.props.params;
    this.props.getMessages(roomId);
    this.props.getPhotos();

  }
  componentWillReceiveProps(nextProps) {
    // console.log('执行componentWillReceiveProps',nextProps);
    if (nextProps.wilddog.messageData !== this.props.wilddog.messageData) {
      const pager = this.state.pagination;
      pager.total = nextProps.wilddog.messageData.length;
      this.setState({
        selectedRowKeys: [],
        selectedRows: [],
        pagination: pager
      })
    }
  }
  handleTableChange(pagination, filters, sorter) {
    let { messageData}=this.props.wilddog;
    // console.log(pagination, filters, sorter);
    if (pagination.pageSize * pagination.current === pagination.total) {
      let payload = {
        messageId: messageData[messageData.length-1].id||0,
        roomId: this.props.params.roomId
      }
      this.props.getMoreMessages(payload);
    }
  }
  delOneMessageHandler(message) {
    let payload = {
      id: message.id,
      roomId: this.props.params.roomId
    }
    this.props.delOneMessage(payload);

  }
  delMessagesHandler() {
    let { selectedRows } = this.state;
    let messageArray = selectedRows.map(record => record.id);
    let payload = {
        messageInfo: messageArray,
        roomId: this.props.params.roomId
      }
      // console.log(selectedRows,messageArray)
    this.props.delMessages(payload)
  }
  toggleCheckHandler(message) {
    message.checked = !message.checked;
    let payload = {
      message: message,
      roomId: this.props.params.roomId
    }
    // console.log(payload);
    this.props.updateMessage(payload);

  }
  addOneMessageHandler(name, message) {
    let { auth } = this.props;
    let { roomId } = this.props.params;
    let { photoData } = this.props.wilddog;
    let payload = {
      messageInfo: {
        userId: auth.uid,
        name: name,
        message: message,
        type: 'defualt',
        photo: photoData[Math.floor(Math.random() * 100)],
        checked: true
      },
      roomId: roomId
    }
    if (payload.type === 'private') {
      // console.log('私有聊天室');
    }
    this.props.addMessage(payload)
  }
  onSelectChange(selectedRowKeys, selectedRows) {
    // console.log('selectedRowKeys changed: ', selectedRows,selectedRowKeys,this);
    this.setState({ selectedRowKeys, selectedRows });
  }
  render() {

    // console.log(this.props)
    const { selectedRowKeys } = this.state;
    let { auth } = this.props;
    const columns = this.columns;
    const { messageData, messageFetching } = this.props.wilddog;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (


      <div id="wilddog">
          <div className="message wrap">
            {auth.status?null:<h2>未检测到登陆状态</h2>}
          </div>
           
            <div className="container-wilddog">
             <div className="add-columns">
                {auth.status?<AddMessage  handAdd={this.addOneMessageHandler} />:<h2></h2>}
            </div>
            <div style={{ marginBottom: 16 }}>
             <Popconfirm title="确认删除咩?" onConfirm={this.delMessagesHandler}>
              <Button type="primary" 
                disabled={!hasSelected} loading={messageFetching}
              
              >批量删除</Button>
              </Popconfirm>
              <span style={{ marginLeft: 8 }}>{hasSelected ? `一共选中了 ${selectedRowKeys.length} 个条目` : ''}</span>
             </div>
            <Table 
                rowSelection={rowSelection}
                loading={messageFetching}
                columns={this.columns} dataSource={messageData}   pagination={this.state.pagination} 
                onChange={this.handleTableChange.bind(this)}
                />
            </div>
        
      </div>



    )
  }
}



RoomManager = Form.create()(RoomManager);








export default RoomManager
